import React, { Component } from 'react';
import G6 from '@antv/g6';
console.log(G6)

export default class App extends Component {
  constructor(props) {
    super(props);
    G6.track(false)
  }
  componentDidMount() {
    const data = {
      nodes: [{
        id: 'node1',
        x: 100,
        y: 200
      }, {
        id: 'node2',
        x: 300,
        y: 200
      }],
      edges: [{
        id: 'edge1',
        target: 'node2',
        source: 'node1'
      }]
    }
    const graph = new G6.Graph({
      container: 'mountNode',
      width: 500,
      height: 500
    })
    graph.read(data);

    let node;
    let dx;
    let dy;

    graph.on('node:dragstart', ev => {
      const { item } = ev;
      const model = item.getModel();
      node = item;
      dx = model.x - ev.x;
      dy = model.y - ev.y
    })
    graph.on('node:drag', ev => {
      node && graph.update(node, {
        x: ev.x + dx,
        y: ev.y + dy
      })
    })
    graph.on('node:dragend', ev => {
      node = undefined
    })
  }
  render() {
    return (
      <div className="chart">
        <div id="mountNode">

        </div>
      </div>
    )
  }
}
